<template>
  <el-tooltip slot="reference" content="布局大小" effect="dark" placement="bottom">
    <el-dropdown trigger="click" @command="handleSetSize">
      <el-button icon="el-icon-arrow-down" style="margin-left: 10px" type="text">布局</el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="layoutSize==='medium'" command="medium">适中</el-dropdown-item>
        <el-dropdown-item :disabled="layoutSize==='small'" command="small">较小</el-dropdown-item>
        <el-dropdown-item :disabled="layoutSize==='mini'" command="mini">迷你</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </el-tooltip>
</template>

<script>
export default {
  computed: {
    layoutSize() {
      return localStorage.getItem("layoutSize") || "medium";
    }
  },
  methods: {
    handleSetSize(size) {
      localStorage.setItem("layoutSize", size);
      location.reload();
    }
  }
};
</script>


